<template>
    <div class="tab-bar">
        <van-tabbar v-model="active">
            <van-tabbar-item v-for="nav in navs" :icon="(nav.meta?.icon as string)" :to="nav.path" :key="nav.path">{{
                nav.meta?.title
            }}</van-tabbar-item>

        </van-tabbar>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { type RouteRecordRaw } from 'vue-router'
import routes from '@/router/routes'

const active = ref(0)

const navs: RouteRecordRaw[] = routes.filter((route: RouteRecordRaw) => {
    return route.meta && route.meta.inTabbar
})
</script>

<style lang="less" scoped>
.tab-bar {
    height: 50px;
}
</style>
